<template>
    <el-table
        ref="tableRef"
        id="cfsstroagerate-table-cfsstroagerate"
        :data="tableData"
        v-bind="tableDefaultAttribute"
        row-key="id"
        :max-height="tableHeight"
        table-layout="auto"
        @row-dblclick="update"
    >
        <template #empty>
            <span>无数据</span>
        </template>
        <el-table-column type="selection" width="55" :align="'center'" />
        <template v-for="col in tableColumns" :key="col.prop">
            <el-table-column
                v-if="!col.isHidden"
                :align="col.align"
                :prop="col.prop"
                :label="col.label"
                :fixed="col.fixed"
                :formatter="col.formatter"
                :type="col.type"
                :width="col.width"
            >
            </el-table-column>
        </template>
    </el-table>
    <el-button class="btn" type="primary" @click="add"
        >增加</el-button
    >

    <el-button class="btn" type="primary" @click="onDelete"
        >删除</el-button
    >
    <el-dialog
        v-model="dialogUpdateVisible"
        title="堆存费率维护"
        draggable
        destroy-on-close
        :center="true"
    >
        <NormalForm
            :formOptions="formOptions"
            :formItems="formItems"
            :formData="paramData"
            :createActionName="createActionName"
            :updateActionName="updateActionName"
            :rules="rules"
            @create="onAdded"
            @update="onUpdated"
            @close="onCloseDialog"
        >
        </NormalForm>
    </el-dialog>
</template>
<script setup lang="ts" name="CfsStroageRate">
import { ref, reactive, onMounted } from 'vue';
import { isEmpty, forEach, forEachRight, includes, findIndex, omit } from 'lodash';
// import { Delete, Plus, Search } from '@element-plus/icons-vue';
import { Request } from '@/app/request';
import { FormFieldItem, TableColumn } from '@/common/types/app';
import { tableColumnDefault, tableDefaultAttribute } from '@/hooks/useTable';
import type { CfsStroageRateModel } from '@/common/types/basedataModel';
import { ElMessage, TableInstance, FormRules } from 'element-plus';
import { tableMaxHeightAdjust } from '@/common/const';
import { initObjectProperty, pickFormFromTable, transFormatter } from '@/common/tools';
import { useAppStore } from '@/store/app';
const props = defineProps<{
    cfs_id: number;
}>();
const tableRef = ref<TableInstance>();
const tableData = ref<Array<CfsStroageRateModel>>([]);
const tableHeight = ref(100);
const dialogUpdateVisible = ref(false);
const paramData = reactive<CfsStroageRateModel>({});
const createActionName = ref('站点堆存费率增加');
const updateActionName = ref('站点堆存费率修改');
const { cntrSiz, cntrTyp, currency} = useAppStore();
const onFormatter = (_row: any, column: any, cellValue: any) => {
    let data: { value: string | number; label: string }[];
    if (column['property'] === 'currency_cod') {
        data = currency;
    } else {
        return cellValue;
    }

    return transFormatter(cellValue, data);
};
const tableColumns = reactive<TableColumn[]>([
    {
        ...tableColumnDefault,
        order: 1,
        prop: 'cntr_siz_cod',
        label: '尺寸',
        fixed: 'left',
        formFieldItemType: 'single',
        optionalValues: cntrSiz,
        width: 80,
    },
    /* {
        ...tableColumnDefault,
        order: 2,
        prop: 'cntr_typ_cod',
        label: '箱型',
        fixed: 'left',
        formFieldItemType: 'single',
        optionalValues: cntrTyp,
        width: 80,
    }, */
    {
        ...tableColumnDefault,
        order: 3,
        prop: 'free_days',
        label: '免费天数',
        fixed: 'left',
        formFieldItemType: 'number',
        width: 120,
    },
    {
        ...tableColumnDefault,
        order: 6,
        prop: 'currency_cod',
        label: '币种',
        formatter: onFormatter,
        formFieldItemType: 'single',
        optionalValues: currency,
        width: 80,
    },
    {
        ...tableColumnDefault,
        order: 4,
        prop: 'rate',
        label: '费率',
        fixed: 'left',
        formFieldItemType: 'number',
        width: 120,
    },
]);
const formOptions = reactive<{
    labelWidth?: string;
    labelPosition?: string;
}>({});
const formItems = reactive<Array<FormFieldItem>>(
    pickFormFromTable(tableColumns),
);
const rules = reactive<FormRules>({
    cntr_siz_cod: [
        { required: true, message: '请选择尺寸', trigger: 'blur' },
    ],
    /* cntr_typ_cod: [
        { required: true, message: '请选择箱型', trigger: 'blur' },
    ], */
    rate: [{ required: true, message: '费率不能为空', trigger: 'blur' }],
    currency_cod: [{ required: true, message: '货币不能为空', trigger: 'blur' }],
});
const onRefresh = async () => {
    const req = new Request('站点堆存费率查询', {
        cfs_id: props.cfs_id,
    });
    const r = await req.post();
    tableData.value.length = 0;
    if (!isEmpty(r.obj)) {
        tableData.value = r.obj;
    }
};
onMounted(() => {
    paramData.cfs_cod = props.cfs_id;
    tableHeight.value = (window.innerHeight / 3) * 2;
    onRefresh();
});
const onCloseDialog = async (arg: any) => {
    if (dialogUpdateVisible.value) {
        dialogUpdateVisible.value = false;
    }
};
const add = () => {
    initObjectProperty(paramData);
    paramData.cfs_cod = props.cfs_id;
    dialogUpdateVisible.value = true;
};
const onAdded = (data: CfsStroageRateModel) => {
    tableData.value.unshift(data);
};
const update = (row: any) => {
    Object.assign(paramData, row);
    dialogUpdateVisible.value = true;
};
const onUpdated = (data: CfsStroageRateModel) => {
    const i = findIndex(tableData.value, (o: CfsStroageRateModel) => {
        return o.id === data.id;
    });
    if (i > -1) {
        Object.assign(tableData.value[i], omit(data, ['id']));
    } else {
        ElMessage.error('修改失败');
    }
};
const onDelete = async () => {
    const rows: Array<CfsStroageRateModel> = tableRef.value?.getSelectionRows() || [];
    if (rows.length === 0) {
        ElMessage.info({
            message: '请选择要删除数据',
        });
        return;
    }
    const ids = Array<number>();

    forEach(rows, (v: CfsStroageRateModel) => {
        ids.push(v.id as number);
    });

    //
    const req = new Request('站点堆存费率删除', { ids });
    const r = await req.post();
    if (r.code > 100) {
        forEachRight(tableData.value, (v: CfsStroageRateModel, i: number) => {
            if (includes(ids, v.id)) {
                tableData.value.splice(i, 1);
            }
        });
    }
};
</script>
<style lang="scss" scoped></style>
